<template>
  <div  class="p16 flex-column-null-between container" style="width: 98%;">

    <el-row>
      <el-col :span="12" class="workProcessClass">

        <el-card class="box-card" v-for="item in workProcessList">
          <div slot="header" class="clearfix" style="height: 12px">
            <span>{{ item.className }}</span>
          </div>
          <el-button @click="startProcess(process)" round v-for="process in item.processList">{{ process.processName }}</el-button>
        </el-card>
      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>
  </div>
</template>

<script>
import {queryWorkProcessList} from '@/api/workflowProcess';
export default {
  components:{
  },
  data() {
    return {
      workProcessList:[],
    }
  },
  created() {
    this.getWorkProcessList();
  },
  methods: {

    async getWorkProcessList(){
      let res = await queryWorkProcessList();
      this.workProcessList = res.data;
    },
    startProcess(item){
      let routeData=this.$router.resolve({ path: item.sysPath, query: {"processId":item.processId,"operateType":"build"} });
      window.open(routeData.href, '_blank')
    }

  },

}
</script>


<style src="../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.workProcessClass{
  height: 500px;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
}
</style>
